<template>
  <div class="container" v-show="showAll">
    <SignaturePad v-if="showSign" @handleSign="(url) => handleSign(false, url)" />

    <nav-bar :title="'系统通知列表'" />

    <div v-for="(item,index) in list" :key="'list'+index" class="box" @click="toDetail(item.id)">
      <span class="title">{{ item.wordName }}</span>
      <span class="content" v-html="item.wordContent"></span>
    </div>
    <div class="sign">
      <div class="label">签名:</div>
      <div class="sign-img" @click="handleClick">
        <img v-if="signImgPath" :src="signImgPath">
      </div>
    </div>
  </div>
  
</template>
<script>
import SignaturePad from '@/components/SignaturePad/index.vue'
import { getWords, uploadSign, getUserSign } from '@/api/user'
import { base64uploadFile } from '@/api/upload'
export default {
  name:'List',
  components: {
    SignaturePad
  },
  data() {
    return {
      showAll:false,
      list: [],
      showSign: false,
      signImgPath:
        'http://47.121.128.80:3000/upload/2024/06/16/8ccc7e29037710e3f28c357c812832da.jpg'
    }
  },
  created() {
    getUserSign().then((res) => {
      this.signImgPath = res.map.userSign
    })
    this.getWordsData()
  },
  methods: {
    handleClick(){
      getUserSign().then((res) => {
          if(res.map.userSign !== undefined && res.map.userSign.length !== 0){
            this.showSign = false
            return this.$toast.fail('已签名')
          }
          this.showSign = true

          // this.signImgPath = res.map.userSign
        })
    },
    async handleSign(flag, url) {
      this.showSign = flag
      if (url) {
        console.log('url:', url)
        const res = await base64uploadFile({
          base64content: url,
          filename: 'sign.jpg'
        })
        const { url: resUrl } = res.map
        console.log(res)
        const uploadRes = await uploadSign({
          sign: resUrl
        })
        console.log('uploadRes:', uploadRes)
        getUserSign().then((res) => {

          this.signImgPath = res.map.userSign
        })
      }else{

        
      }
    },
    async getWordsData() {
      const res = await getWords()
      if (res && res.map && res.map.words) {
        this.list = [...res.map.words]
        this.showAll =true
        console.log(this.list)
      }

    },
    goLogin() {
      this.$router.back(0)
    },
    toDetail(type) {
      this.$router.push('/notice/list/' + type)
    }
  }
}
</script>
<style lang='scss' scoped>
.container{
    // padding-top: 100px;
    width: 100% !important;
    min-height: 100vh;
    background-color: #f6f6f6;
    box-sizing: border-box;
    padding-bottom: 200px;
}
.top{
    width:100%;
    height:90px !important;
    display:flex;
    align-items:center;
    padding-left:24px;
    border-bottom:1px solid #6e6e6e60;
    background: #fff;
    position:fixed;
    top:0;
    left:0;
    right:0;

    .title{
        margin-left:50px;
    }
}
.box{
    // width: calc(100%-48px);
    box-sizing: border-box;
    padding: 24px;
    margin: 0 24px;
    margin-top: 10px;
    height: 150px;
    border-radius: 15px;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .title{
        line-height: 40px;
    }
    .content{
        margin-top: 15px;
        font-size: 22px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.sign {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign .label {
  font-size: 1.5rem;
  margin-right: 120px;
}

.sign-img {
  border: 1px solid #777;
  width: 80px;
  height: 240px;
  transform: rotate(-90deg);
}

.sign-img img {
  width: 100%;
  height: 100%;
}
</style>
